import React, {useState} from "react";
import './index.scss'
import {useHistory} from "react-router-dom";

const Order: React.FC<any> = (props) => {
  console.log("-------Order------")

  const history = useHistory()

  // 选择车型
  const [type, setType] = useState(1)

  console.log(props)
  const state: any [] = props.location.state
  // const {state} = props.location

  const goBack = () => {
    history.go(-1)
  }

  return (
    <div>
      <div className="Container"/>

      <div className="SelectBox">
        <div className="carTop">
          <span>选择车型</span>
          <svg onClick={goBack} className="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="2099" width="200" height="200">
            <path
              d="M806.4 263.2l-45.6-45.6L512 467.2 263.2 217.6l-45.6 45.6L467.2 512 217.6 760.8l45.6 45.6L512 557.6l248.8 248.8 45.6-45.6L557.6 512z"
              p-id="2100" fill="#33363B"/>
          </svg>
        </div>
        <div className="carList">
          {
            state.map((item, _) => {
              return (
                <div onClick={() => setType(item.id)} className={type == item.id ? "carChoose" : "car"} key={item.id}>
                  <div>
                    {item.name}
                  </div>
                  <img alt="" src={item.configuration[0].carColor[item.id].configList[1].picUrl}/>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}

export default Order
